<template>
  <div>
    <el-form :model="loginForm" :rules="rules" ref="loginForm" v-loading="loading" element-loading-text="正在登录..."
             element-loading-spinner="el-icon-loading"
             element-loading-background="rgba(0, 0, 0, 0.8)"
             class="loginContainer">
      <h3 class="loginTitle">系统登录</h3>
      <el-form-item prop="username">
        <el-input size="normal" type="text" v-model="loginForm.username" auto-complete="off" placeholder="请输入用户名"/>
      </el-form-item>
      <el-form-item prop="password">
        <el-input size="normal" type="password" v-model="loginForm.password" auto-complete="off"
                  placeholder="请输入密码"/>
      </el-form-item>
      <el-checkbox size="normal" class="loginRemember" v-model="checked"/>
      <el-button size="normal" type="primary" style="width: 100%;" @click="submitLogin">登录</el-button>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      loading: false,
      loginForm: {
        username: 'admin',
        password: '123'
      },
      checked: true,
      rules: {
        username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
        password: [{required: true, message: '请输入密码', trigger: 'blur'}]
      }
    }
  },
  methods: {
    submitLogin () {
      // this.$refs.loginForm.validate((valid) => {
      //   if (valid) {
      //     this.loading = true
      //     this.postRequest('/doLogin', this.loginForm).then(resp => {
      //       this.loading = false
      //       if (resp) {
      //         this.$router.replace('/home')
      //       }
      //     })
      //   } else {
      //     return false
      //   }
      // })
      this.$router.replace('/home')
    }
  }
}
</script>

<style lang="stylus" scoped>
  .loginContainer
    margin 180px auto
    width 350px
    padding 15px 35px 15px 35px
    background #fff
    border 1px solid #eaeaea
    border-radius 15px
    box-shadow 0 0 25px #cac6c6
    .loginTitle
      margin 15px auto 20px auto
      text-align center
      color #505458
    .loginRemember
      text-align left
      margin: 0 0 15px 0
</style>
